<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <style>
        main{
            width: 1000px;
            margin: 0 auto;
            text-align: center;
        }
        section{
            display: flex;
        }

    </style>
  </head>
  <body>
    <input type="text" id="city" /><button type="button" class="btn">
      查询
    </button>

    <main></main>

    <script id="weather-template" type="text/html">
              <h3>{{currentCity}}</h3>
              <div class="today">
                  <div class="wendu">{{weather_data[0].temperature}}</div>

                  <p class="tianqi">{{weather_data[0].weather}}</p>
                  <p class="fengxiang">{{weather_data[0].wind}}</p>
                  <p class="shishi">实时温度{{weather_data[0].date | current}}，空气指数{{pm25}}</p>
                </div>
                <section>
                {{each weather_data}}
                    <div>
                        <p class="weekend">{{$value.date}}</p>
                        <img src="{{$value.dayPictureUrl}}" alt="" />
                        <p>{{$value.temperature}}</p>
                        <p>{{$value.weather}}</p>
                        <p>{{$value.wind}}</p>
                    </div>
                {{/each}}
                </section>
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
    <script src="./js/template-web.js"></script>
    <script>


template.defaults.imports.current = function(value){
     
        return value.split('实时')
    }

      $(".btn").click(() => {
        var citys = $("#city").val();
        var param = {
          callback: "?",
          location: citys,
          output: "json",
          ak: "byG5wfvpxHeCQmiK8dCmGVQRIlbxcTTx",
          mcode: "com.BaiduWeather",
        };
        $.getJSON(
          "http://api.map.baidu.com/telematics/v3/weather",
          param,
          (data) => {
            console.log(data);
            var weather = data.results[0];
            console.dir(weather);
            var htmlstr = template("weather-template", weather);
            $("main").html(htmlstr);
          }
        );
      });
    </script>
  </body>
</html>
